<template>
  <div class="app-container">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-input v-model="formInline.name" placeholder="请输入神采礼品编号/名称" @keyup.enter.native="searchClick">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select filterable v-model="formInline.status" no-data-text="全部" style="width:100px;">
            <el-option v-for="item in status_type_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small" @selection-change="handleSelectionChange"
        ref="multipleTable ">
        <el-table-column type="selection" :selectable='selectable' width="36"></el-table-column>
        <el-table-column align="center" label="审核编号" prop="id"></el-table-column>
        <el-table-column align="center" label="上传用户" prop="nick"></el-table-column>
        <el-table-column align="center" label="礼品神采编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label="礼品名称" prop="name"></el-table-column>
        <el-table-column align="center" label="提交时间" prop="create_time"></el-table-column>
        <el-table-column align="center" label="状态" prop="state_name"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status==0" type="primary" style="width: 80px" size="small" @click="auditClick(scope.row.id,1)">审 核</el-button>
            <el-button v-else type="primary" size="small" @click="auditClick(scope.row.id,0)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹框 -->
      <el-dialog width="600px" title="图片审核" :visible.sync="addhouseDialog">
        <div style="position:absolute;top:60px;">
          <span class="title">礼品名称：</span>
          <span>{{gift_name}}</span>
        </div>
        <div style="display: flex;margin-top: 10px">
          <div><span class="title">礼品图片：</span></div>
          <div>
            <div v-for="(a,i) in auditList" :key="a.id" style="display: flex;margin-bottom: 30px">
              <div v-viewer="options" class="images fit">
                <img :src="a.thumb" :data-source="a.img" class="image" :key="a.img" />
              </div>
              <div style="margin-left:34px">
                <el-checkbox-group :disabled="isCheck!=1" v-model="auditList[i].isPass">
                  <div style="display: flex">
                    <el-checkbox @change="resetChecked(i)" label='通过' true-label="1" false-label="0">
                    </el-checkbox>
                  </div>
                  <el-checkbox @change="resetChecked(i)" label='不通过' true-label="0" false-label="1">
                  </el-checkbox>
                  <el-autocomplete style="margin-left:20px;margin-top:15px" :disabled='auditList[i].isPass==1||auditList[i].isPass==null||auditStatus!=0'
                    class="inline-input" v-model="auditList[i].cause" :fetch-suggestions="querySearch" placeholder="输入/选择不通过原因" :maxlength="inputLen">
                  </el-autocomplete>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>
        <div v-if="auditStatus==0" slot="footer" class="dialog-footer">
          <el-button type="primary" @click='submit'>确认提交</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
      <el-button @click="jumpBatch" class="pull-right" type="primary" size="small" :disabled='goBatch'>批量审核图片</el-button>
    </div>
  </div>
</template>

<script>
import { getList, getPage, getAuditList, submitAuditList } from '@/api/information/audit';
export default {
  data() {
    return {
      listLoading: false,
      currentPage: 1,
      totalDataNumber: 0,
      list: [],
      auditList: [],
      addhouseDialog: false,
      gift_name: '',
      pass: 1,
      inputLen: 30,
      status_type: '',
      isCheck: 0,
      auditStatus: 0,
      options: {
        //预览图配置
        toolbar: true,
        url: 'data-source'
      },
      formInline: {
        name: '',
        status: ''
      },
      cause: [{ value: '图片不清晰' }, { value: '图片与实物不符' }, { value: '图片损坏' }],
      status_type_list: [
        { id: '', name: '全部' },
        { id: 0, name: '未审核' },
        { id: 1, name: '未通过' },
        { id: 2, name: '已通过' }
      ],
      batchList: [],
      batchId: [],
      goBatch: true
    };
  },
  created() {
    this.searchClick();
  },
  methods: {
    // 搜索
    searchClick() {
      this.fetchData();
      // this.getSize();
    },
    //获取审核状态
    getStatus(list) {
      list.forEach(val => {
        switch (val.status) {
          case '0':
            val.state_name = '未审核';
            break;
          case '1':
            val.state_name = '未通过';
            break;
          case '2':
            val.state_name = '已通过';
            break;
          default:
            val.state_name = '--';
        }
      });
    },
    // 分页
    async handleCurrentChange(val) {
      this.listLoading = true;
      this.list = await getList(this.formInline, val);
      this.getStatus(this.list);
      this.listLoading = false;
    },
    // 列表获取
    async fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      try {
        let res = await getPage(this.formInline);
        this.totalDataNumber = res.page * 20;
        if (res.page > 0) {
          this.list = await getList(this.formInline);
          this.getStatus(this.list);
        } else {
          this.$message.error('没有找到相关信息！');
          this.formInline.name = '';
        }
        this.listLoading = false;
      } catch (err) {
        this.$message.error(err);
        this.listLoading = false;
      }
    },
    selectable(row, index) {
      if (row.status == 0) {
        return true;
      } else {
        return false;
      }
    },
    //审核图片列表获取
    async auditClick(id, isCheck) {
      this.isCheck = isCheck;
      this.listLoading = true;
      this.addhouseDialog = true;
      try {
        let data = await getAuditList({ id });
        let list = data.list;
        let __statusNum = 0;
        for (let s of list) {
          if (s.status == 0) __statusNum++;
          s.thumb = s.img + this.$store.getters.getThumbnailImg;
        }
        list.forEach(val => {
          switch (val.status) {
            case '0':
              val.isPass = '';
              val.cause = '';
              break;
            case '1':
              val.isPass = '1';
              break;
            case '2':
              val.isPass = '0';
              val.cause = val.remark;
              break;
            case '3':
              val.isPass = '1';
              // val.isUsed='0';
              break;
            case '4':
              val.isPass = '1';
              // val.isUsed='1';
              break;
            default:
              val.isPass = '';
              // val.isUsed='';
              val.cause = '';
          }
        });
        this.auditStatus = list[0].status;
        this.auditList = list;
        this.gift_name = data.name;
        this.listLoading = false;
      } catch (error) {
        this.$message.error(error);
        this.listLoading = false;
      }
    },
    querySearch(queryString, cb) {
      var cause = this.cause;
      var results = queryString ? cause.filter(this.createFilter(queryString)) : cause;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      };
    },
    //当点击是否通过选项框时重置isPass或cause
    resetChecked(i) {
      if (this.auditList[i].isPass == 1) {
        // this.auditList[i].cause=""
        //直接用.设置属性不会双向绑定
        this.$set(this.auditList[i], 'cause', '');
      } else {
        // this.auditList[i].isUsed=""
        // this.$set(this.auditList[i],"isUsed","")
      }
    },
    //提交
    submit() {
      for (var item of this.auditList) {
        if (!item.isPass || (item.isPass == 0 && !item.cause)) {
          this.$message.error('请完善审核信息！');
          return;
        }
        if (item.isPass == 1) {
          item.cause = '';
        }
        // else{
        //     item.isUsed=""
        // }
      }
      //console.log(this.auditList);
      let data = {};
      data.up_id = this.auditList[0].up_id;
      data.pass = [];
      data.refuse = [];
      for (var item of this.auditList) {
        if (item.isPass == 1) {
          data.pass.push(item.id);
          // if(item.isUsed==1){
          //     data.is_use.push(item.id);
          // }else{
          //     data.fav.push(item.id)
          // }
        } else {
          data.refuse.push({ id: item.id, remark: item.cause });
        }
      }
      // if(data.is_use.length>1)
      //     this.$message.error("只能有一张主图哦！");
      submitAuditList(data).then(response => {
        this.$message({ type: 'success', message: response.message });
        if (response.code == 1) {
          this.handleCurrentChange(this.currentPage);
          this.addhouseDialog = false;
        }
      });
    },
    //批量审核
    handleSelectionChange(val) {
      this.batchList = val;
      let arr = [];
      for (var v of val) {
        arr.push(v.id);
      }
      this.$store.commit('addBatchIdList', arr);
      //console.log(this.$store.getters.addBatchAudit,1)
      if (this.batchList.length > 0) {
        this.goBatch = false;
      } else {
        this.goBatch = true;
      }
    },
    jumpBatch() {
      this.$store.commit('changeIsBatch', 1);
      this.$router.push({ name: 'information/batchAudit' });
    }
  },
  activated() {
    if (this.$store.getters.getIsBatch == 1) {
      this.searchClick();
      this.$store.commit('changeIsBatch', 0);
    }
  }
};
</script>
